<template>
  <div class="PublicizeOrderMamageDetials">
    <div class="header">
      <div class="setting-title">订单详情</div>
    </div>
    <div class="setting-main">
      <img :src="getImageUrl(courseDetails.courseData?.coverUrl || '')" class="course-img">
      <div class="course-content">
        <div class="title">{{ courseDetails.courseData?.title || '' }}</div>
        <div class="desc otw-4">{{ courseDetails.courseData?.description || '' }}</div>
        <div class="course-info">
          <div class="info">
            <span>预约日期：</span>{{ format(orderDetails.order.appointTime) }}
          </div>
          <div class="info">
            <span>地点：</span>{{ orderDetails.order.location }}
          </div>
          <div class="info">
            <span>听众人数：</span>{{ orderDetails.order.listenerCount }}
          </div>
          <div class="info">
            <span>联系人：</span>{{ orderDetails.order.linkMan }}
          </div>
          <div class="info">
            <span>联系人电话：</span>{{ orderDetails.order.linkManTel }}
          </div>
          <!-- <div class="info">
            <span>申请单位：</span>{{ orderDetails.order.listenerCount }}
          </div> -->
          <div class="info">
            <span>提交时间：</span>{{ orderDetails.order.listenerCount }}
          </div>
        </div>
      </div>
    </div>
    <div class="button">
      <el-button type="primary" @click="router.back()" style="color: #8B8B8B;" text bg>返 回</el-button>
      <!-- 0:待确认 1:已确认 2:已拒绝 -->
      <el-button type="primary" round @click="openConfirm">确 认</el-button>
    </div>
  </div>
</template>
<script>
export default { name: 'PublicizeOrderMamageDetials' }
</script>
<script setup>
import { useRoute, useRouter } from 'vue-router';
import { http } from '@/utils/http/index.js'
import { ref } from 'vue';
import { format } from '@/plugins/moment.js'
import { getImageUrl } from '@/utils/index.js'
// import { ElMessage } from 'element-plus'
const router = useRouter()
const route = useRoute()

if (!route.query.id) router.back()

const orderDetails = ref({ order: {} })
http.$GET('/Preach/GetPreachOrderDetail', { id: route.query.id }).then(res => {
  if (res.isError) return
  orderDetails.value = res.result
  getCourse(res.result.order.courseId)
})

const courseDetails = ref({ courseData: {} })
const getCourse = (courseId) => {
  http.$GET('/Preach/GetPreachCourseDetail', { id: courseId }).then(res => {
    if (res.isError) return
    courseDetails.value = res.result
  })
}
</script>
<style lang='scss' scoped>
.PublicizeOrderMamageDetials {
  width: 100%;
  height: 100%;
  font-family: PingFang SC-Medium, PingFang SC;
  background-color: #fff;
  display: flex;
  flex-direction: column;

  .setting-title {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
  }

  .status-tag {
    width: 64px;
    height: 20px;
    border-radius: 10px;
    text-align: center;
    line-height: 20px;
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    margin-left: 20px;

    &.listed {
      color: #2CC86D;
      background-color: #EAF9EF;
    }

    &.not-listed {
      color: #3D88DE;
      background-color: #EAF3F9;
    }
  }

  .header {
    height: 64px;
    border-bottom: 1px solid #F2F2F2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    font-size: 16px;
    font-weight: normal;
    color: #666666;
  }

  .setting-main {
    flex: 1;
    height: 0;
    padding: 34px 53px;
    display: flex;
    gap: 47px;

    .course-img {
      width: 337px;
      height: 212px;
      object-fit: cover;
    }

    .course-content {
      flex: 1;
      width: 0;
      display: flex;
      flex-direction: column;

      .title {
        font-size: 18px;
        font-weight: bold;
        color: #000000;
        margin-bottom: 17px;
      }

      .desc {
        font-size: 18px;
        font-weight: 400;
        color: #7C7C7C;
        line-height: 30px;
        margin-bottom: 16px;
      }

      .course-info {
        flex: 1;
        height: 0;
        background: #F2F2F2;
        padding: 26px 33px;
        overflow: auto;

        .info {
          font-size: 18px;
          color: #313131;
          margin-bottom: 20px;

          span {
            color: #7C7C7C;
          }
        }
      }
    }
  }

  .button {
    text-align: center;
    margin-bottom: 62px;

    :deep(.el-button) {
      border-radius: 26px;
      width: 129px;
      height: 39px;
    }
  }
}
</style>